import React from 'react'
import { sty } from '../../tool'

export default class AlphaButton extends React.PureComponent {
    static defaultProps = {
        alpha: 0.5,
    }
    constructor(props) {
        super(props)
        this.state = {
            nowAplha: 1
        }
    }
    render() {
        let { alpha, style, ...rest } = this.props
        let { nowAplha } = this.state
        let rootProps = {
            style: {
                ...style,
                ...sty.btn(),
                opacity: nowAplha,
            },
            onTouchStart: this.handleTouchStart,
            onTouchEnd: this.handleTouchEnd,
            onMouseDown: this.handleTouchStart,
            onMouseUp: this.handleTouchEnd,
            ...rest
        }
        return (
            <div {...rootProps} >
                {this.props.children}
            </div>
        )
    }
    handleTouchStart = () => {
        this.setState({
            nowAplha: this.props.alpha,
        })
    }
    handleTouchEnd = () => {
        this.setState({
            nowAplha: 1,
        })
    }
}